// 股票详情
<template>
  <div :class="'kknnkser' + tabsValue">
    <n-card>
      <StockInformation :code="codes" v-if="codes" @getInfo="getInfo"></StockInformation>
      <n-space vertical v-else>
        <n-skeleton height="55px" width="100%" />
      </n-space>
    </n-card>
    <div class=" display-flex lddq mt10">
      <div class="jhnmxetxewr">
        <TimeSharingChart :code="codes" :info="info" v-if="info" />
      </div>
      <div class="flex-1 ml10 mr10">
        <div class="KLine">
          <KLine :code="codes"></KLine>
        </div>
      </div>
      <div class="jhnmxetxewr EventToRemind">
        <EventToRemind :code="codes" class=""></EventToRemind>

      </div>
    </div>
    <div class=" display-flex mt10 lddq">
      <div class="jhnmxetxewr">
        <div v-if="info" class="">
          <ClinchDealTheDetail :code="codes"></ClinchDealTheDetail>
        </div>

        <div class="mt10" v-if="codes">
              <MoneyFlows :code="codes"></MoneyFlows>
            </div>
            <div class="mt10" v-if="codes">
              <TheMainTrend :code="codes"></TheMainTrend>
            </div>

    
      </div>
      <div class="ml10 flex-1 ">
        <div class="dfsdtrsdett">
          <longhub :code="codes"></longhub>
        </div>

        <div class=" display-flex mt10 lddq">
          <div class="jhnmxetxewr">
    
            <div class="" v-if="codes">
          <Plate :code="codes"></Plate>
        </div>

          </div>
          <div class="flex-1 ml10">
            <HistoricalDataOverview :code="codes" :maxHeight="windHeight > 1080 ? 685 : 550"></HistoricalDataOverview>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="bgff pd dfdstewer">

      <n-tabs type="line" v-model:value="tabsValue" @update:value="tabupdate">
        <n-tab name="1"> 分时线</n-tab>
        <n-tab name="2"> 日线 </n-tab>
        <n-tab name="3">资金流向 </n-tab>
        <n-tab name="4">大事提醒 </n-tab>

      </n-tabs>
    </div>

    <div class="display-flex mt10">
      <div class="details-left">
        <TimeSharingChart :code="codes" :info="info" v-if="info" />
        <div v-if="info" class="mt10">
          <ClinchDealTheDetail :code="codes"></ClinchDealTheDetail>
        </div>

        <div class="mt10" v-if="codes">
          <Plate :code="codes"></Plate>
        </div>

      </div>

      <div class="ml10 details-center" v-if="codes">
        <div class="KLine">
          <KLine :code="codes"></KLine>
        </div>
        <div class="mt10 dfsdtrsdett">
          <longhub :code="codes"></longhub>
        </div>
        <div class="mt10 dfrrewr">
   
          <EventToRemind :code="codes" class="EventToRemind"></EventToRemind>
        </div>
      </div>
      <div class="ml10 flex-1 zilxsse" v-if="codes">
        <div class="" v-if="codes">
          <MoneyFlows :code="codes"></MoneyFlows>
        </div>
        <div class="mt10" v-if="codes">
          <TheMainTrend :code="codes"></TheMainTrend>
        </div>
        <div class="mt10">
          <HistoricalDataOverview :code="codes" :maxHeight="windHeight > 1080 ? 685 : 550"></HistoricalDataOverview>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from "vue";
import { dxget, qurl } from "../../util/index";
import ClinchDealTheDetail from "../../components/details/ClinchDealTheDetail.vue";
import StockInformation from "../../components/details/StockInformation.vue";
import MoneyFlows from "../../components/details/MoneyFlows";
import Plate from "../../components/details/Plate";
import TheMainTrend from "../../components/details/TheMainTrend";
import KLine from "../../components/details/KLine";
import EventToRemind from "../../components/details/EventToRemind";
import longhub from "../../components/details/longhub.vue";
import HistoricalDataOverview from "../../components/details/HistoricalDataOverview";
import TimeSharingChart from "../../components/details/TimeSharingChart";
import blockDetail from "../../components/details/blockDetail";

import store from "../../store";
let tabsValue = ref("1");
let codes = ref();
let info = ref();
const windHeight = ref(store.state.windHeight);

const tabupdate = (num) => {
  tabsValue.value = num;
};
const getInfo = (data) => {
  info.value = data;
};
codes.value = qurl().code;
</script>
<style scoped>
.details-top {
  line-height: 1.5;
}

.details-left {
  width: 500px;
}

.details-center {
  width: 650px;
}

.dfrrewr {
  height: 510px;
  overflow: auto;
}

.dfsdtrsdett {
  height: 414px;
  overflow: auto;
}



.jhnmxetxewr {
  width: 500px;
}

.EventToRemind {
  height: 367px;
  overflow: auto;
}
</style>
